Managing UI Widgets

Sign in to your Rocketadmin account.
In the Dashboard click on a connection to open it:
Click on and then on UI Widgets:
On the subsequent screen click on Create UI Widget:
From the UI Widgets settings you can:
- select a Field (table column)
- based on the database type of the field or on the type of data you plan to store in it, choose an appropriate Display type:
- provide additional information (in case the settings are required):
- assign a different or more descriptive Display name to the field:
- include further information (Display Description) to be visible on mouse over:
Save your changes.
You can review the new settings once you open a record to edit:

Moving the mouse over will display the description:

Widgets with required settings

The following field types provide additional options that you can configure:

Boolean

Boolean
// Display "Yes/No" buttons and specify "allow_null" in field structure:
// Use "false" to require that one of the buttons is selected
// Use "true" if the field might be left unspecified

{
	"structure": {
		"allow_null": false
	}
}

Example:

Code

You can highlight and indent your source code fields with the help of this widget. Here you can find the full list of languages which are supported: https://microsoft.github.io/monaco-editor/

Code
// provide language of code to highlight: 'html', 'css', 
// 'typescript', 'yaml', 'markdown'
// example:
{
  "language": "php"
}

note

For JSON code, we suggest using our dedicated widget called JSON.

Example:

Before applying the Code widget:

After the widget is configured:

Color

This widget can assist you in displaying different colors based on their code values (in HEX, RGB or HSL format). And in edit mode you can effortlessly switch between tones through a palette interface.

Color
// Optional: Specify output format for color values
// Supported formats: "hex", "hex_hash" (default), "rgb", "hsl"
// Example configuration:

{
  "format": "hex_hash"  // Will display colors as "#FF5733"
}

// Format options:
// - "hex": Display as "FF5733" (no hash)
// - "hex_hash": Display as "#FF5733" (default)
// - "rgb": Display as "rgb(255, 87, 51)"
// - "hsl": Display as "hsl(9, 100%, 60%)"

Example:

Having similar database settings:

before applying the Color widget, your database will look as follows:

And after you configure the widget:

the improved display enables you to change colors using a palette (in edit mode):

Country

Using this widget, you can "transform" the country codes from your database into their corresponding country names and even display their flags:

Country
// Configure country display options
// Example:
{
  "show_flag": true,
  "allow_null": false
}

Example:

Having similar database settings:

before applying the Country widget, your database will look as follows:

And after you configure the widget:

the countries will be presented with their full name and flag:

Foreign key

In general, this widget is designed to help you mimic the Foreign key concept for non-relational databases. And in certain rare cases of relational databases, it can also help you create imaginary links between tables that are not directly associated through primary and foreign keys. You need to add the values of the following parameters - column_name of the first table which you want to link to the referenced_column_name of the second table (or the referenced_table_name):

Foreign key
// Provide settings for foreign key widget
{
  "column_name": "Artist_id", // copy the name of the column you selected
  "referenced_column_name": "Artist_id",
  "referenced_table_name": "Artists"
}

Example:

Two NoSQL tables - Artists and Paintings, are supposed to be "linked" by the column Artist_id:

However, this relationship is not established automatically and therefore you cannot display the related record by clicking on an Artist_id:

To fully enable foreign key functionality in no-SQL databases, it is necessary to set up the Foreign key widget for the Paintings table as follows:

After that, you will be able to click on an Artist_id value and review the linked record on the right side panel:

Image

The Image widget enables you to see a preview of the pictures whose URLs are kept in specific table fields. Additionally, you can configure the pictures height and URL prefix:

Image
// provide image height in px to dispaly in table
// prefix: optional URL prefix to prepend to image source
// example:
{
  "height": 100,
  "prefix": "https://example.com/images/"
}

Example:

Before applying the Image widget:

After the widget is configured:

Money

The Money widget allows you to present standard currency fields featuring the currency code (the three-letter ISO code) along with the currency value, which may be in numeric format or even stored as a string.

Money
// Configure money widget settings
// example:
{
  "default_currency": "CHF",
  "decimal_places": 2,
  "allow_negative": true
}

Example:

Having similar database settings:

before applying the Money widget, your database will look as follows:

And after you configure the widget:

the database fields will include the currency code:

Number

Using this widget, you can display and/or convert your number values in different predefined units, such as bytes, meters, seconds, grams .

Number
// Configure number display with unit conversion
// Example units: "bytes", "meters", "seconds", "grams"
{
  "unit": null
}

Example:

Having similar database settings:

before applying the Number widget, your database will look as follows:

And after you configure the widget:

the database values are converted and include the unit abbreviation:

Password

This widget can help you encrypt your password fields using different algorithms:

Password
// provide algorithm to encrypt your password, one of:
//sha1, sha3, sha224, sha256, sha512, sha384, bcrypt, scrypt, argon2, pbkdf2.
// example:

{
  "encrypt": true,
  "algorithm": "sha256"
}

Example:

Before applying the Password widget:

After the widget is configured:

In edit mode the password remains hidden (it simply shows as an empty field). In case you want to delete it, mark the option Clear password:

Phone

With the help of this widget you can display international phone numbers along with the country codes in a more readable format:

Phone
// Configure international phone number widget
// example:
{
  "preferred_countries": ["BG", "UA", "GR"],
  "enable_placeholder": true,
  "phone_validation": true
}

Example:

Having similar database settings:

before applying the Phone widget, your database will look as follows:

And after you configure the widget:

the improved display (main and edit view) also includes country flags:

Range

You can use this widget to effortlessly manage range values and present them in a more understandable format. The settings that can be configured include minimum, maximum, and step values:

Range
// Configure the minimum, maximum and step values for the range
// Default: min = 0, max = 100, step = 1
{
  "min": 0,
  "max": 100,
  "step": 1
}

Example:

Having similar database settings:

before applying the Range widget, your database will look as follows (main and edit view):

Once you have set up the widget,

the range values are displayed in a more user-friendly manner (main and edit view):

You can easily change values with the slider and then click on Save to store the new number.

Select

You can connect column values to specific words (and/or add emojis) that hold more meaning, allowing you to change table cells by selecting from the set of predefined values. The equivalent of select in programming languages is the enum (enumeration) type.

Select
// provide array of options to map database value (key 'value') 
// in human readable value (key 'label');
// for example:
// 500 => 500 Internal Server Error
{
  "allow_null": false,
  "options": [
    {
      "value": "500",
      "label": "500 Internal Server Error"
    }
  ]
}

Example:

Having similar database settings:

before applying the Select widget, your database will look as follows (main and edit view):

Once you have set up the widget,

the values in the database fields will remain unchanged, yet they will appear in a more readable format (main and edit view where you can even change values using the dropdown menus):

Textarea

You have the option to limit the size of the text area by setting a default number of rows (lines) to be visible. The remaining text can be reviewed by scrolling down or by expanding the area from the bottom right corner.

Textarea
// provide number of strings to show.
{
  "rows": 2
}

Example:

URL

The URL widget is useful in cases when you do not have web address prefixes in a database column, but still you want to include them without making any permanent modifications.

URL
// prefix: optional URL prefix to prepend to the href
// example:
{
  "prefix": "https://example.com/"
}

Example:

Having similar database settings:

before applying the URL widget, your database will look as follows (main and edit view):

And after you configure the widget:

the values in the database fields will remain unchanged, yet they will appear as links:

You can click on a link to open it in your browser or move the mouse over to display the copy URL icon :

UUID

The Universally Unique Identifier (UUID) is a 128-bit value that serves to uniquely identify information within computer systems. There are various types of UUIDs, each created using slightly different methods. Some versions include timestamp data, while others depend on random values. In Rocketadmin, using the UUID widget, you can transform your string values into the UUID versions v1, v3, v4, v5 and v7 which we support.

UUID
// Configure UUID generation version and parameters
// Available versions: "v1", "v3", "v4" (default), "v5", "v7"
// For v3/v5: provide namespace and optionally name
{
  "version": "v3",
  "namespace": "6ba7b810-9dad-11d1-80b4-00c04fd430c8",
  "name": ""
}

note

For versions v3 and v5, if you use the same namespace with the same name, it will always result in the generation of the same UUID.

Example:

Having similar database settings:

before applying the UUID widget, your database will look as follows:

And after you configure the widgets:

the values in the database fields will remain unchanged, yet they will appear in a condensed font:

And if you open a record for editing by clicking on , then the icon will be displayed next to each field with configured UUID widget:

Click on each of them to review the generated UUID versions:

note

In case you want to keep the updated values in your database, simply click on Save to confirm.

Other widgets

Date, Time and Datetime

Sometimes, you may wish to save dates and timestamps in database fields that are of string (or varchar) type. In these situations, Rocketadmin can still provide you with a functional interface featuring date pickers. All you need to do is to add the appropriate widgets - Date, Time or Datetime:

Example:

Having similar database settings:

before applying the Date/Datetime widgets, your database will look as follows:

And after you configure the widget:

in edit mode you will be able to select dates from the date pickers:

To delete widgets

You can remove a single widget by clicking on the icon next to it or delete all the widgets at once by clicking on Clear All:

To create a widget​

Widgets with required settings​

Boolean​

Code​

Color​

Country​

Foreign key​

Image​

Money​

Number​

Password​

Phone​

Range​

Select​

Textarea​

URL​

UUID​

Other widgets​

Date, Time and Datetime​

To delete widgets​

To create a widget

Widgets with required settings

Boolean

Code

Color

Country

Foreign key

Image

Money

Number

Password

Phone

Range

Select

Textarea

URL

UUID

Other widgets

Date, Time and Datetime

To delete widgets